/**
 * Copyright (c) 2020 kedacom
 * OpenATC is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 * http://license.coscl.org.cn/MulanPSL2
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
 * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
 * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 **/
<template>
  <div class="custom-cross" v-if="visible">
    <ImportDialog ref="importDialog" @loadSvgString="loadSvgString"/>
    <Messagebox :visible="canclesettingvisible" :text="$t('edge.channelizationmap.canclesetting')" @cancle="cancleSetting" @ok="completeSetting"/>
    <div class="custom-main" ref="custommain">
      <div class="custom-group drawPanelAnimation" ref="customGroup">
        <!-- 绘制功能 -->
        <div class="draw-function">
          <div class="again-import">
            <span class="import-label">{{$t('edge.channelizationmap.importcrosspicture')}}</span>
            <el-button
              class="again-import-btn"
              type="primary"
              :disabled="!isSeletable"
              @click="clickOpen"
            >{{$t('edge.channelizationmap.againimport')}}</el-button>
          </div>

          <div class="draw-to-sketchpad">
            <div class="drawtip">{{$t('edge.channelizationmap.drawtips')}}</div>
            <div class="draw-operation">
              <!-- <el-button
                type="primary"
                :disabled="!isSeletable"
                @click="addText"
              >添加text</el-button>-->
              <el-button
                v-for="editbtn in editBtnGroup"
                :key="editbtn.type"
                class="edit-icon-btn"
                @click="handleAddIcon(editbtn)"
              >
                <LaneIconSvg :laneicon="editbtn"/>
                <div
                  class="btn-label"
                  :class="{'highlightColor': editbtn.active === true, 'defaultColor': editbtn.active === false}"
                >{{editbtn.label}}</div>
              </el-button>
            </div>
          </div>
        </div>
        <!-- 画板区域 -->
        <div class="sketchpad-area" id="sketchpadgroup" ref="sketchpadgroup">
          <!-- <drr
            id="sketchpadArea"
            :resizable="false"
            :x="allitem.x"
            :y="allitem.y"
            :w="allitem.w"
            :h="allitem.h"
            :angle="allitem.angle"
            :selectable="false"
            :aspectRatio="true"
          > -->
            <ChannelizationElements
              id="channelizationElements"
              :allitem="allitem"
              :CrossMapVisible="CrossMapVisible"
              :CrossMapData="CrossMapData"
              :isSeletable="isSeletable"
              :pointchange="pointchange"
              @changeCrossMap="changeCrossMap"
              :Motorways="Motorways"
              :curChooseIconIndex="curChooseIconIndex"
              @changeMotorwayItem="changeMotorwayItem"
              @handleSelectIcon="handleSelectIcon"
              :Countdown="Countdown"
              :CountdownList="phaseCountdownMock"
              @changeTimeItem="changeTimeItem"
              :Pedwalk="Pedwalk"
              @changePedItem="changePedItem"
              :Detector="Detector"
              @changeDetectorItem="changeDetectorItem"
              :DetectorChart="DetectorChart"
              :CurChooseIcon="curChooseIcon"
              @changeDetectorChartItem="changeDetectorChartItem"
            />
          <!-- </drr> -->
        </div>
        <div class="draw-end-function">
          <el-button type="primary" @click="handleReset()">{{$t('edge.button.reset')}}</el-button>
          <!-- <el-button type="primary" @click="cancledraw()">{{$t('edge.button.Cancel')}}</el-button> -->
          <el-button type="primary" @click="savedraw()">{{$t('edge.button.save')}}</el-button>
        </div>
      </div>
      <div class="custom-edit" ref="customEdit">
        <LaneEditPanel
          :Data="curChooseIcon"
          :choosedirections="curChooseIcon.direction"
          :Motorways="Motorways"
          @handleChooseDire="handleChooseDire"
          @handleChoosePed="handleChoosePed"
          @deleteItem="deleteItem"
          @changeIconDataByType="changeIconDataByType"
          @handleDisassociatePhase="handleDisassociatePhase"
        />
      </div>
    </div>
    <!-- <el-row>
      <div class="phase-table">
        <PhaseTable
          :customlist="customlist"
          @changeText="changeText"
          @deleteItem="deleteItem"
          @changeMotorwayItem="changeMotorwayItem"
          @changeIconDataByType="changeIconDataByType"
        />
      </div>
    </el-row> -->
  </div>
</template>

<script>
import ChannelizationElements from './channelizationElements'

import LaneEditPanel from './laneEditPanel'

import PhaseTable from './table'
import PhaseDataModel from './utils/phaseDataModel.js'
import LaneIconSvg from './iconSvg/laneIcon'

import ImportDialog from './importDialog'
import Messagebox from '@/components/MessageBox/index'

import { mapState } from 'vuex'
import PhaseDataMgr from '../phaseDataMgr.js'

import { getIframdevid } from '@/utils/auth'
import { saveChannelizatonChart } from '@/api/cross'
import { getMessageByCode } from '../../../utils/responseMessage.js'

export default {
  name: 'customcross',
  components: {
    Messagebox,
    ImportDialog,
    ChannelizationElements,
    PhaseTable,
    LaneIconSvg,
    LaneEditPanel
  },
  computed: {
    ...mapState({
      phaseList: state => state.globalParam.tscParam.phaseList,
      PhaseDataMgr: state => state.globalParam.PhaseDataMgr,
      curBodyWidth: state => state.globalParam.curBodyWidth,
      sidebar: state => state.app.sidebar,
      curOpenatcAgentid: state => state.globalParam.curOpenatcAgentid
    })
  },
  props: {
    loadedChannelizatonData: {
      type: Object
    }
  },
  watch: {
    // curBodyWidth: {
    //   handler: function (oldval, newval) {
    //     if (newval !== oldval) {
    //       this.resizePanelWidth(newval)
    //     }
    //   }
    // },
    // sidebar: {
    //   handler: function (oldval, newval) {
    //     setTimeout(() => {
    //       this.resizePanelWidth(this.curBodyWidth)
    //     }, 200)
    //   },
    //   deep: true
    // },
    curOpenatcAgentid: {
      handler: function (val) {
        // 平台设备切换时，清空上一个渠化配置
        this.handleReset()
      },
      deep: true
    },
    loadedChannelizatonData: {
      handler: function (val) {
        // 平台设备切换时，重载当前路口保存的渠化配置
        this.load('all')
      },
      deep: true
    }
  },
  data () {
    return {
      visible: true,
      canclesettingvisible: false,

      isSeletable: true, // 元素是否可以编辑
      Motorways: [], // 管理所有自定义机动车图标数据
      // Bicyclelanes: [], // 非机动车图标数据
      index: 0,
      customlist: [], // 所有自定义的图标列表
      Texts: [], // 管理所有自定义文字数据
      Pedwalk: [], // 管理所有人行横道
      Detector: [], // 管理所有检测器
      DetectorChart: [], // 管理所有检测器统计图
      motorwayicon: '',
      IconLengh: 45,
      IconWdith: 100,
      textareaW: 200,
      textareaH: 100,
      pedW: 206,
      pedH: 22,
      MapW: 800,
      MapH: 200,
      detectorW: 30,
      detectorH: 30,
      detectorchartW: 70,
      detectorchartH: 100,
      CrossMapData: {
        svgstr: '',
        imgfilesrc: ''
      }, // 管理底图数据
      allitem: {
        x: 435,
        y: 325,
        w: 870,
        h: 650,
        angle: 0
      },
      countdownW: 140,
      countdownH: 140,
      Countdown: [], // 管理倒计时图标
      phaseCountdownMock: [
        {
          id: 2,
          phaseCountdown: 59,
          phaseCountdownColor: '#fff'
        },
        {
          id: 5,
          phaseCountdown: 32,
          phaseCountdownColor: '#fff'
        }
      ], // 倒计时动态数据模拟
      svgvisible: false,
      pointchange: false, // 控制选中时光标样式
      CrossMapVisible: true, // 控制底图显示隐藏

      curChooseIconIndex: -1,
      curChooseIcon: {},
      editBtnGroup: [
        {
          label: this.$t('edge.channelizationmap.motorway'),
          type: 'motorway',
          active: false,
          width: '16px',
          height: '16px'
        },
        // {
        //   label: this.$t('edge.channelizationmap.bicyclelane'),
        //   type: 'bicyclelane',
        //   active: false,
        //   width: '7px',
        //   height: '16px'
        // },
        {
          label: this.$t('edge.channelizationmap.pedcrossing'),
          type: 'pedcrossing',
          active: false,
          width: '16px',
          height: '16px'
        },
        {
          label: this.$t('edge.channelizationmap.countdown'),
          type: 'countdown',
          active: false,
          width: '16px',
          height: '16px'
        },
        {
          label: this.$t('edge.channelizationmap.detector'),
          type: 'detector',
          active: false,
          width: '16px',
          height: '16px'
        }
      ],
      AddType: '', // 正在添加的图标类型

      dirNameMap: new Map([
        [1, '直行'],
        [2, '左转'],
        [3, '右转'],
        [4, '掉头']
      ]),
      phaseAssociatedMap: new Map() // 关联相位Map: key 是相位ID， value 是车道数据包含direction
    }
  },
  methods: {
    clickOpen () {
      this.$refs.importDialog.clickOpen()
    },

    // 改变鼠标样式
    changeMouse () {
      if (!this.isSeletable) return
      // document.getElementById('sketchpadArea').style.cursor = 'url(resource/pic/icons/magnifier3.cur) 12 12,crosshair'
      document.getElementById('sketchpadArea').style.cursor =
        'url(resource/pic/icons/magnifier3.cur) 12 12,pointer'
      this.pointchange = true
    },

    // 根据类型，表格编辑后，修改数据策略
    changeIconDataByType (iconObj, changefield) {
      this.curChooseIcon = JSON.parse(JSON.stringify(iconObj))
      // 根据数据类型改变数据
      switch (iconObj.icontype) {
        case 'text':
          this.changeText(iconObj, changefield)
          break
        case 'vehile':
          this.changeMotorwayItem(iconObj, changefield)
          if (changefield.indexOf('phaseid') !== -1) {
            // 相位关联成功后，生成最新的相位关联map数据
            this.PhaseDataMgr.updateLanePhaseAssociatedMap(this.Motorways)
          }
          break
        case 'ped':
          this.changePedItem(iconObj, changefield)
          break
        case 'countdown':
          this.changeTimeItem(iconObj, changefield)
          break
        case 'detector':
          this.changeDetectorItem(iconObj, changefield)
          break
      }
      console.log('this.customlist', this.customlist)
    },

    // 被删除的相位所关联的车道，解除相位关联
    handleDisassociatePhase (deletePhaseid) {
      for (let i = 0; i < this.Motorways.length; i++) {
        if (this.Motorways[i].phaseid === deletePhaseid) {
          this.Motorways[i].phaseid = undefined
          this.Motorways[i].phaselabel = ''
          this.Motorways[i].phasetype = undefined
        }
      }
      for (let i = 0; i < this.Pedwalk.length; i++) {
        if (this.Pedwalk[i].phaseid === deletePhaseid) {
          this.Pedwalk[i].phaseid = undefined
          this.Pedwalk[i].phaselabel = ''
          this.Pedwalk[i].phasetype = undefined
        }
      }
      // 更新模型内初始相位列表数据
      this.PhaseDataMgr.updateLanePhaseAssociatedMap(this.Motorways)
    },

    // 添加不同类型的车道图标
    handleAddIcon (editbtn) {
      // 按钮及图标高亮效果实现
      this.editBtnGroup = this.editBtnGroup.map(btn => {
        btn.active = false
        return btn
      })
      for (let i = 0; i < this.editBtnGroup.length; i++) {
        if (this.editBtnGroup[i].type === editbtn.type) {
          this.editBtnGroup[i].active = true
        }
      }
      this.changeMouse()
      this.AddType = editbtn.type
    },

    addMotorwayIcon () {
      this.PhaseDataModel = new PhaseDataModel()
      let defaultMotorwayParam = {
        x: this.setLeft,
        y: this.setTop,
        w: this.IconLengh,
        h: this.IconWdith,
        angle: 0
      }
      this.IconLengh = 45
      this.IconWdith = 100
      let Motorwaysitem = {
        index: this.index,
        icontype: 'vehile',
        icondireid: [1], // 前端区分箭头方向的标识
        icondirename: [this.PhaseDataModel.getPhase(1).name],
        lanePosition: 1,
        controltype: 0,
        phasetype: undefined,
        phaseid: undefined,
        phaselabel: '',
        direction: [], // 值为1-16，对应16个方向
        flip: false, // 车道类型是否翻转显示
        ...defaultMotorwayParam
      }
      this.curChooseIconIndex = Motorwaysitem.index
      this.curChooseIcon = JSON.parse(JSON.stringify(Motorwaysitem))
      this.Motorways.push(Motorwaysitem)
      this.customlist.push(Motorwaysitem)
      this.increaseId()
    },
    changeMotorwayItem (MotorwayItem, fields) {
      this.changeItem(MotorwayItem, fields, this.Motorways)
      this.changeCustomItem(MotorwayItem, fields)
    },

    // 选中图标
    handleSelectIcon (iconobj) {
      // console.log('选中的图标', iconobj)
      this.curChooseIconIndex = iconobj.index
      this.curChooseIcon = JSON.parse(JSON.stringify(iconobj))
    },
    // 根据多选的车道，修改车道图标
    handleChooseDire (iconObj) {
      this.curChooseIcon = JSON.parse(JSON.stringify(iconObj))
      let editDirections = iconObj.icondireid
      if (
        this.curChooseIcon.icontype === 'vehile'
      ) {
        this.curChooseIcon.icondireid = editDirections
        this.curChooseIcon.icondirename = editDirections.map(dir =>
          this.dirNameMap.get(dir)
        )
        this.changeMotorwayItem(this.curChooseIcon, [
          'icondireid',
          'icondirename'
        ])
      }
      console.log(this.curChooseIcon)
    },

    addPedwalkIcon () {
      let defaulPedParam = {
        x: this.setLeft,
        y: this.setTop,
        w: this.pedW,
        h: this.pedH,
        angle: 0,
        viewbox: [0, 0, 206, 22]
      }
      this.pedW = 206
      this.pedH = 22
      let peditem = {
        index: this.index,
        icontype: 'ped',
        iconpedtypeid: 1,
        iconpedposition: 1,
        phasetype: undefined,
        phaseid: undefined,
        phaselabel: '',
        ...defaulPedParam
      }
      this.curChooseIconIndex = peditem.index
      this.curChooseIcon = JSON.parse(JSON.stringify(peditem))
      this.Pedwalk.push(peditem)
      this.customlist.push(peditem)
      this.increaseId()
    },
    changePedItem (PedItem, fields) {
      this.changeItem(PedItem, fields, this.Pedwalk)
      this.changeCustomItem(PedItem, fields)
    },

    handleChoosePed (pediconobj) {
      this.curChooseIcon = JSON.parse(JSON.stringify(pediconobj))
      if (this.curChooseIcon.icontype === 'ped') {
        this.curChooseIcon.iconpedtypeid = pediconobj.iconpedtypeid
        this.curChooseIcon.iconpedposition = pediconobj.iconpedposition
        this.changePedItem(this.curChooseIcon, ['iconpedtypeid', 'iconpedposition'])
      }
      console.log(this.curChooseIcon)
    },

    addTimer () {
      let defaultCountParam = {
        x: this.setLeft,
        y: this.setTop,
        w: this.countdownW,
        h: this.countdownH,
        angle: 0
      }
      this.countdownW = 140
      this.countdownH = 140
      let countdownitem = {
        index: this.index,
        icontype: 'countdown',
        ...defaultCountParam
      }
      this.curChooseIconIndex = countdownitem.index
      this.curChooseIcon = JSON.parse(JSON.stringify(countdownitem))
      this.Countdown.push(countdownitem)
      this.customlist.push(countdownitem)
      this.increaseId()
    },
    changeTimeItem (timeItem, fields) {
      this.changeItem(timeItem, fields, this.Countdown)
      this.changeCustomItem(timeItem, fields)
    },

    addAllDetector () {
      // 统计图暂留
      // this.addDetectorChart()
      this.addDetector()
    },
    addDetector () {
      let defaultDetectorParam = {
        x: this.setLeft,
        y: this.setTop,
        w: this.detectorW,
        h: this.detectorH,
        angle: 0
      }
      this.detectorW = 30
      this.detectorH = 30
      let detectoritem = {
        index: this.index,
        icontype: 'detector',
        detailtype: 'detector',
        detectortype: 1, // 检测器类型： 1 车辆检测器 2 行人检测器
        detectorid: undefined,
        occupancythreshold: 80,
        flowsaturationthreshold: 20,
        ...defaultDetectorParam
      }
      this.curChooseIconIndex = detectoritem.index
      this.curChooseIcon = JSON.parse(JSON.stringify(detectoritem))
      this.Detector.push(detectoritem)
      this.customlist.push(detectoritem)
      this.increaseId()
    },
    changeDetectorItem (detectorItem, fields) {
      this.changeItem(detectorItem, fields, this.Detector)
      this.changeCustomItem(detectorItem, fields)
    },
    addDetectorChart () {
      let defaultDetectorParam = {
        x: this.setLeft,
        y: this.setTop - 100, // 偏移到检测器正上方150
        w: this.detectorchartW,
        h: this.detectorchartH,
        angle: 0
      }
      this.detectorchartW = 70
      this.detectorchartH = 100
      let detectoritem = {
        index: this.index,
        icontype: 'detector',
        detailtype: 'detectorChart',
        ...defaultDetectorParam
      }
      this.curChooseIconIndex = detectoritem.index
      this.curChooseIcon = JSON.parse(JSON.stringify(detectoritem))
      this.DetectorChart.push(detectoritem)
      this.customlist.push(detectoritem)
      this.increaseId()
    },
    changeDetectorChartItem (detectorItem, fields) {
      this.changeItem(detectorItem, fields, this.DetectorChart)
      this.changeCustomItem(detectorItem, fields)
    },

    // 添加文字
    addText () {
      let defaultTextParam = {
        x: this.textareaW / 2,
        y: this.textareaH / 2,
        w: this.textareaW,
        h: this.textareaH,
        angle: 0
      }
      this.textareaW = 200
      this.textareaH = 100
      let textitem = {
        index: this.index,
        icontype: 'text',
        text: '',
        ...defaultTextParam
      }
      this.Texts.push(textitem)
      this.customlist.push(textitem)
      this.increaseId()
    },
    changeText (textobj, fields) {
      this.changeItem(textobj, fields, this.Texts)
      this.changeCustomItem(textobj, fields)
    },

    changeCustomItem (row, fields) {
      this.changeItem(row, fields, this.customlist)
    },
    changeItem (row, fieldarr, data) {
      for (let item of data) {
        if (item.index === row.index) {
          for (let field of fieldarr) {
            item[field] = row[field]
          }
        }
      }
    },
    deleteItem (row) {
      let index = row.index
      this.customlist = this.customlist.filter(ele => ele.index !== index)
      switch (row.icontype) {
        case 'text':
          this.Texts = this.Texts.filter(ele => ele.index !== index)
          break
        case 'vehile':
          this.Motorways = this.Motorways.filter(ele => ele.index !== index)
          break
        case 'ped':
          this.Pedwalk = this.Pedwalk.filter(ele => ele.index !== index)
          break
        case 'countdown':
          this.Countdown = this.Countdown.filter(ele => ele.index !== index)
          break
        case 'detector':
          this.Detector = this.Detector.filter(ele => ele.index !== index)
          this.DetectorChart = this.DetectorChart.filter(ele => ele.index !== index)
      }
      this.curChooseIconIndex = -1
      this.curChooseIcon = {}
    },

    loadSvgString (type, imgstr) {
      // 加载用户上传的底图svg字符串
      if (type === 'vectorgraph') {
        // 导入矢量图
        this.getCrossMapViewbox(imgstr)
        let defaultCrossMapParam = {
          x: this.MapW / 2,
          y: this.MapH / 2,
          w: this.MapW,
          h: this.MapH,
          angle: 0
        }
        // （由于底图采用定位，导致脱离标准流，父元素高度塌陷，此处需要重新设置父元素高度，以防底图超出弹窗边界）
        // this.$refs.crossmap.style.height = this.MapH
        // this.$refs.crossmap.style.width = this.MapW
        this.CrossMapData = {
          type,
          svgstr: imgstr,
          ...defaultCrossMapParam
        }
      }
      if (type === 'picture') {
        // 导入图片
        this.CrossMapData = {
          type,
          imgfilesrc: imgstr
        }
      }
    },
    getCrossMapViewbox (svgstr) {
      // 获取户上传svg的viewBox属性的大小
      let arr = svgstr.split('"')
      let index, viewBox
      for (let i = 0; i < arr.length - 1; i++) {
        if (arr[i].indexOf('viewBox') !== -1) {
          index = i
        }
      }
      if (index) {
        viewBox = arr[index + 1]
      }
      this.MapW = Number(viewBox.split(' ')[2])
      this.MapH = Number(viewBox.split(' ')[3])
    },
    changeCrossMap (mapdata, fields) {
      this.changeItem(mapdata, fields, [this.CrossMapData])
    },

    // 重置
    handleReset () {
      this.customlist = []
      this.Texts = []
      this.Motorways = []
      this.Countdown = []
      this.Pedwalk = []
      this.Detector = []
      this.DetectorChart = []
      this.CrossMapData = {
        svgstr: '',
        imgfilesrc: ''
      }
      this.index = 0
      this.curChooseIcon = {}
    },
    // 取消
    cancledraw () {
      this.canclesettingvisible = true
    },
    completeSetting () {
      this.canclesettingvisible = false
      this.$router.push('/overview/index')
    },
    cancleSetting () {
      this.canclesettingvisible = false
    },
    // 保存
    savedraw () {
      let temp = {}
      console.log(this.customlist)
      for (const item of this.customlist) {
        if (temp.hasOwnProperty(item.icontype)) {
          temp[item.icontype].push(item)
        } else {
          temp[item.icontype] = [item]
        }
      }
      if (this.CrossMapData.svgstr !== '') {
        temp.crossMap = this.CrossMapData
      }
      // this.$store.dispatch('SetShowHomePage', 'Channelization')
      this.saveChannelizatonChart(temp)
    },
    // 加载
    load (type) {
      this.curChooseIconIndex = -1
      // this.getChannelizatonChart().then((channelizatondata) => {
      // let savedTemp = JSON.parse(localStorage.getItem('savedTemp'))
      let savedTemp = JSON.parse(JSON.stringify(this.loadedChannelizatonData))
      let arr = []
      for (const [key, value] of Object.entries(savedTemp)) {
        if (key === 'vehile') {
          this.Motorways = value
        }
        if (key === 'text') {
          this.Texts = value
        }
        if (key === 'ped') {
          this.Pedwalk = value
        }
        if (key === 'countdown') {
          this.Countdown = value
        }
        if (key === 'detector') {
          this.Detector = value.filter(ele => ele.detailtype === 'detector')
          this.DetectorChart = value.filter(ele => ele.detailtype === 'detectorChart')
        }
        if (key === 'crossMap') {
          this.CrossMapData = JSON.parse(JSON.stringify(value))
          // if (value.type === 'vectorgraph') {
          //   // svg底图，只加载底图区域870*650范围内的元素
          //   let { svgstr, ...allitem } = value
          //   this.allitem = allitem
          // }
        } else {
          if (value.length > 1) {
            arr = [...arr, ...value]
          } else {
            arr.push(value[0])
          }
        }
      }
      this.customlist = JSON.parse(JSON.stringify(arr))
      this.increaseId()
      // if (type === 'all') {
      //   // 加载整体模版后，默认切换到元素不可编辑状态，但整体可编辑
      //   this.isSeletable = false
      // } else {
      //   this.isSeletable = true
      // }
      // })
    },
    increaseId () { // 实现index在之前的基础上寻找最小的
      let List = this.customlist.map(ele => ele.index)
      let i = List.length - 1
      if (i >= 0) {
        for (let j = 1; j <= 40; j++) {
          if (!List.includes(j)) {
            this.index = j
            return
          }
        }
      }
    },

    exitEdit () {
      this.isSeletable = !this.isSeletable
    },

    resetAddParams () {
      this.AddType = ''
      this.editBtnGroup = this.editBtnGroup.map(btn => {
        btn.active = false
        return btn
      })
    },
    resizePanelWidth (bodywidth) {
      // 根据1920适配，右侧过宽
      // this.drawpartWidth = ((1089 / 1980) * bodywidth).toFixed(0)
      // this.mainWidth = this.$refs.custommain.offsetWidth
      // this.editpartWidth = Number(this.mainWidth) - Number(this.drawpartWidth) - 20
      // this.$refs.customGroup.style.width = this.drawpartWidth + 'px'
      // this.$refs.customEdit.style.width = this.editpartWidth + 'px'
      // this.allitem.w = this.drawpartWidth
      // this.allitem.x = this.drawpartWidth / 2
      // 编辑面板固定宽度600，左侧适配
      this.mainWidth = this.$refs.custommain.offsetWidth
      this.drawpartWidth = this.mainWidth - 545
      this.$refs.customGroup.style.width = this.drawpartWidth + 'px'
      this.$refs.customGroup.style.transition = 'width 0.5s ease-in-out'
      if (this.mainWidth && this.drawpartWidth) {
        this.allitem.w = this.drawpartWidth
        this.allitem.x = this.drawpartWidth / 2
      }
    },
    saveChannelizatonChart (ChannelizatonData) {
      let agentid = getIframdevid()
      let params = {
        agentid,
        data: ChannelizatonData
      }
      saveChannelizatonChart(params).then(data => {
        if (!data.data.success) {
          let parrenterror = getMessageByCode(data.data.code, this.$i18n.locale)
          if (data.data.data) {
            // 子类型错误
            let childErrorCode = data.data.data.errorCode
            if (childErrorCode) {
              let childerror = getMessageByCode(data.data.data.errorCode, this.$i18n.locale)
              this.$message.error(parrenterror + ',' + childerror)
            }
          } else {
            this.$message.error(parrenterror)
          }
          return
        }
        let msg = this.$t('edge.common.savesucess')
        this.$message({
          message: msg,
          type: 'success',
          duration: 1 * 1000
        })
        this.$store.dispatch('SetShowHomePage', 'Channelization')
        this.$router.push('/overview/index')
      })
    },
    // getChannelizatonChart () {
    //   let agentid = getIframdevid()
    //   return new Promise((resolve, reject) => {
    //     getChannelizatonChart(agentid).then(data => {
    //       if (!data.data.success) {
    //         let parrenterror = getMessageByCode(data.data.code, this.$i18n.locale)
    //         if (data.data.data) {
    //         // 子类型错误
    //           let childErrorCode = data.data.data.errorCode
    //           if (childErrorCode) {
    //             let childerror = getMessageByCode(data.data.data.errorCode, this.$i18n.locale)
    //             this.$message.error(parrenterror + ',' + childerror)
    //           }
    //         } else {
    //           this.$message.error(parrenterror)
    //         }
    //         this.handleReset()
    //         return
    //       }
    //       this.handleReset()
    //       let channelizatondata = data.data.data
    //       resolve(channelizatondata)
    //     })
    //   })
    // },
    handleClickSketchpad () {
      // 监听画板区域点击事件，改变图标放置的位置
      let sketchpadArea = document.getElementById('sketchpadArea')
      let _this = this
      sketchpadArea.addEventListener('click', function (e) {
        if (_this.pointchange) {
          document.getElementById('sketchpadArea').style.cursor =
          'url(resource/pic/icons/magnifier3.cur) 12 12,default'
          _this.pointchange = false
          _this.setLeft =
          e.clientX -
          document.getElementById('channelizationElements').getBoundingClientRect().left
          _this.setTop =
          e.clientY -
          document.getElementById('channelizationElements').getBoundingClientRect().top
          if (_this.AddType === '') return
          switch (_this.AddType) {
            case 'motorway':
              _this.addMotorwayIcon()
              break
            case 'pedcrossing':
              _this.addPedwalkIcon()
              break
            case 'countdown':
              _this.addTimer()
              break
            case 'detector':
              _this.addAllDetector()
          }
          _this.resetAddParams()
        }
      })
    }
  },
  created () {},
  mounted () {
    // this.resizePanelWidth(this.curBodyWidth)
    let PhaseData = new PhaseDataMgr(this.phaseList)
    this.$store.dispatch('InitPhaseDataMgr', PhaseData)
    this.handleClickSketchpad()
    // 初始加载已保存的渠化图
    // this.load('all')
  }
  // updated () {
  //   if (this.$refs.sketchpadgroup.offsetWidth) {
  //     this.allitem.w = this.$refs.sketchpadgroup.offsetWidth
  //     this.allitem.x = this.$refs.sketchpadgroup.offsetWidth / 2
  //     this.allitem.h = this.$refs.sketchpadgroup.offsetHeight
  //     this.allitem.y = this.$refs.sketchpadgroup.offsetHeight / 2
  //   }
  // }
}
</script>

<style lang="css" rel="stylesheet/scss">
</style>
